<template>
    <el-dialog v-model="visible" :title="title" :width="width" @close="resetForm" @open="init" :close-on-press-escape="false">
        <el-form label-width="100px" label-position="left" label-suffix="：" :model="process" :rules="rules" ref="formRef">
            <el-form-item label="编号" prop="id" style="display: none"/>
            <el-form-item label="流程类型" prop="classifyId">
                <el-select-v2
                    v-model="process.classifyId"
                    :options="$store.state.proClassify"
                    placeholder="选择流程类型"
                    size="large"
                />
<!--                <el-select v-model="process.classifyId" placeholder="请选择分类">-->
<!--                    <el-option v-for="(item) in $store.state.proClassify" :value="item.value" :label="item.label"/>-->
<!--                </el-select>-->
            </el-form-item>
            <el-form-item label="流程名称" prop="name">
                <el-input v-model="process.name"/>
            </el-form-item>
            <el-form-item label="前缀名称" prop="prefix">
                <el-input v-model="process.prefix"/>
            </el-form-item>
            <el-form-item label="规则" prop="rule">
                <el-input type="textarea" v-model="process.rule"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="default" @click="visible=false">取消</el-button>
            <template v-if="type===0">
                <el-button type="primary" @click="submitAdd">确认添加</el-button>
            </template>
            <template v-else>
                <el-button type="primary" @click="submitUpdate">确认修改</el-button>
            </template>
        </template>
    </el-dialog>
</template>

<script>
    import {ElMessage} from "element-plus";
    import {addProcess, hasSameCodeSibling, hasSameNameSibling, updateProcess} from "../../../../network/sys/process";
    import {getProTypeOptions} from "../../../../network/sys/processClassify";
    import {getCurrentInstance, reactive, ref, toRefs} from "vue";

    export default {
        name: "ProcessForm",
        emits:['refresh-data'],
        setup(props,{emit}){
            const visible = ref(false);//是否展示
            const formRef = ref(null);
            const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
            const validateProName = async (rule,value,callback)=>{
                if(form.process.classifyId){
                    await hasSameNameSibling({
                        id: form.process.id,
                        name: value,
                        classifyId: form.process.classifyId
                    }).then(vo=>{
                        if(vo){
                            callback(new Error('同类别下已存在相同名称的流程'));
                        }
                        callback();
                    })
                }
                callback();
            }
            const validateProCode = (rule,value,callback)=>{
                hasSameCodeSibling({
                    id: form.process.id,
                    code: value
                }).then(vo=>{
                    if(vo){
                        callback('流程编码重复')
                    }
                    callback();
                })
            }
            const form = reactive({
                process: {
                    id: null,
                    name: null,
                    prefix: null,
                    rule: null,
                    classifyId: null
                },
                rules: {
                    name: [
                        {required: true,message: '请输入流程名称',trigger: 'blur'},
                        {validator: validateProName,trigger: 'blur'}
                    ],
                    prefix: [
                        {required: true,message: '请输入流程前缀',trigger: 'blur'},
                        {validator: validateProCode, trigger: 'blur'}
                    ],
                    rule: [],
                    classifyId: [
                        {required: true,message: '请选择所属流程类型',trigger: 'change'},
                    ]
                },
                resetForm(){
                    formRef.value.resetFields();
                    formRef.value.clearValidate();
                    // console.log('formRef.value.resetFields() after',form.process)
                },
                setProcess({id, name, prefix, rule, classifyId}){
                    form.process.id = id;
                    form.process.name = name;
                    form.process.prefix = prefix;
                    form.process.rule = rule;
                    form.process.classifyId = classifyId;
                },
                submitAdd(){
                    formRef.value.validate((valid)=>{
                        if(valid){
                            addProcess(form.process).then(vo=>{
                                globalProperties.$response.handle({
                                    data: vo,
                                    success: '添加成功',
                                    error: '添加失败',
                                    successFn: ()=>{
                                        emit('refresh-data')//刷新数据表格
                                        visible.value = false;
                                    }
                                })
                            })
                        }else{
                            ElMessage.error('请先完善表单!');
                        }
                    })
                },
                submitUpdate(){
                    formRef.value.validate((valid)=>{
                        if(valid){
                            updateProcess(form.process).then(vo=>{
                                globalProperties.$response.handle({
                                    data: vo,
                                    success: '修改成功',
                                    error: '修改失败',
                                    successFn:()=>{
                                        emit('refresh-data')//刷新数据表格
                                        visible.value = false;
                                    }
                                })
                            })
                        }else{
                            ElMessage.error('请先完善表单!');
                        }
                    })
                },
            })
            return{
                visible,
                formRef,
                ...toRefs(form)
            }
        },
        props:['width'],
        data(){
            return{
                type: 0,//0为添加表单，1为修改表单
                title: '',//表单名称
            }
        },
        methods:{
            loadProTypes(){
                getProTypeOptions().then(vo=>{
                    this.$response.handle({
                        data: vo,
                        successFn:()=>{
                            this.$store.commit('setProClassify',vo.data);
                        },
                        log: '流程选项数据'
                    })
                })
            },
            init(){
                if(this.$store.state.proClassify.length===0){
                    this.loadProTypes();
                }
            }
        },
        created() {
            this.init();
        }
    }
</script>

<style scoped>

</style>